﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxText_Nicky.aspx.cs"
    Inherits="WebApplication.test.AjaxText_Nicky" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .styleSearch
        {
            float: left;
        }
        .Search_style_1
        {
            clear: both;
            border: 1px blue solid;
            overflow: hidden;
            height: auto;
        }
        .ClearBoth
        {
            clear: both;
        }
        .ChecklistStyle{ display:block; float:left; width:300px; line-height:25px; text-align:left; height:auto; overflow:hidden; font-size:12px;}
    </style>
    <script src="../Media/Js/jquery-1.4.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function GetProductCategory(val, bool, Element, mark, id,title) {
            var i = 0;
            var sum = 0;
            if (bool) {
                $.ajax({
                    type: "POST",
                    url: "/ServerAshxFile/GetProductCategory.ashx",
                    data: { 'ProductCatUID': val },
                    dataType: "json",
                    timeout: 10000,
                    beforeSend: function () {
                    },
                    complete: function (res, msg) {
                        if (res.status == 0)//请求超时
                        {
                        }
                        else if (res.status == 200)//请求成功
                        {
                            var resAry = null;
                            resAry = eval(res.responseText);
                            if (resAry != null) {
                                //显示子子类
                                GetSubCategoryResponse(resAry, Element, mark, id,title);

                            }
                        }
                        else  //发生错误
                        {
                            alert(title + '数据加载为成功请重新都选');
                        }
                    }
                });
            }
            else {
            }
        }

        function GetSubCategoryResponse(data, Element, mark, id, title) {
            var html = title + "<input type='checkbox' id='" + title.substring(0, 4) + "_all' name=\"" + title.substring(0, 4) + "\" onclick='GetHaveCheckedList(this.name,this.id);'/>Select All / Unclick to clear all<br/>";
            $.each(data, function (entryIndex, entry) {
                if (entry['ProductSubCatEng'] != null) {
                    html = html + "<span class=\"ChecklistStyle\"><input type='checkbox' onclick='ClearClickByAll(this)' name='" + title.substring(0, 4) + "' value='" + entry['ProductSubCatEng'] + "' />" + entry['ProductSubCatEng'] + " " + entry['ProductSubCatChi'] + "</span>";
                }
            });
            html = "<div id='SubCat_" + mark + "_" + id + "' class=\"ClearBoth\">" + html + "</div>";
            Element.append(html);
        }
        function GetProductSubCat(id, val, mark,title) {
            var checkbox = $('#' + id).attr("checked");
            var DivElement = $('#SubCat_' + mark);
            if (checkbox == true) {
                GetProductCategory(val, true, DivElement, mark, id,title)
            }
            else {
                $('#' + id).removeAttr("checked");
                $('#' + id).parent
                $('#SubCat_' + mark + "_" + id).remove();
                GetFirstElement('#' + id);
            }
        }

        function GetMainCheckBox(id, mark_b) {
            var checkbox = $('#' + id).attr("checked");
            var MainDivElement = $('#' + id + '_all');

            if (checkbox == true) {
                MainDivElement.next().empty().slideDown('slow');
                MainDivElement.find('input:checkbox').each(function () {
                    $(this).attr('checked', 'checked');
                    GetProductCategory(this.value, this.checked, MainDivElement.next(), mark_b, this.id,this.name)
                    //当前的this.checked的值为true,在这里可以添加加载数据的对象
                });
            }
            else {
                MainDivElement.find('input:checkbox').each(function () {
                    $(this).removeAttr("checked");
                    MainDivElement.next().empty();
                });
            }
        }
        function GetFirstElement(Element) {
            $(Element).parent().parent().siblings().eq(1).children('input:checkbox').attr("checked", ""); ;
        }

        function GetHaveCheckedList(name, id) {
            var CheckAll = $("#" + id).attr('checked');
            var GetName=$('[name=' + name + ' ]');
            if (CheckAll == true) {
                for (var i = 1; i < GetName.length; i++) {
                    GetName.attr('checked', 'checked');
                }
            } else {
                for (var i = 1; i < GetName.length; i++) {
                    GetName.eq(i).removeAttr('checked');
                }
            }
        }

        function ClearClickByAll(val) {
            if (val.checked == false) {
                $("#" + val.name + "_all").removeAttr('checked');
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater runat="server" ID="ProductCategory" OnItemDataBound="ProductCategory_ItemDataBound">
            <ItemTemplate>
                <div id="ProCate_<%#Convert.ToInt32(DataBinder.Eval(Container,"ItemIndex"))+1%>_1"
                    class="Search_style_1">
                    <div class="Search_style_2">
                        <strong>Main Category(Can select more than one)</strong></div>
                    <div class="Search_style_2">
                        <input type="checkbox" name="" id="Main_<%=mark_a %>" onclick="GetMainCheckBox(this.id,<%=mark_b%>)"/><label
                            for=""><strong>Select All / Unclick to clear all</strong></label></div>
                    <div id="Main_<%=mark_a %>_all">
                        <asp:Repeater runat="server" ID="CategoryList">
                            <ItemTemplate>
                                <div class="styleSearch">
                                    <input type="checkbox" name="<%#Eval("ProductCat_Eng").ToString().Trim()%>" id="Checkbox_<%=mark_a++%>" value="<%#Eval("ProductCatUID")%>"
                                        onclick="GetProductSubCat(this.id,this.value,<%=mark_b %>,this.name);"><label for=""><strong><%#Eval("ProductCat_Eng")%></strong><strong><%#Eval("ProductCat_Chi")%></strong></label>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                    <div id="SubCat_<%=mark_b++%>" class="ClearBoth">
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <div id="message">
    </div>
    </form>
    <div id="letter">
    </div>
</body>
</html>
